<form #f="ngForm" (ngSubmit)="submit(f)">
  <div class="form-group">
    <label for="name">Course Name</label>
    <input ngModel required
    #name="ngModel"
    minlength=5
    name="name" 
    type="text" 
    id="name"
    class="form-control"
    >
    <div *ngIf="name.touched && !name.valid" class="alert alert-danger">
      <div *ngIf="name.errors.required">Name is required</div>
      <div *ngIf="name.errors.minlength">name should be minimum {{ name.errors.minlength.requiredLength }} characters</div>
    </div>
  </div>
  <div class="form-group">
    <label for="category">Category</label>
    <select 
      class="form-control" 
      ngModel 
      #category="ngModel" 
      name="category"
      id="category"
      >
      <option *ngFor="let category of categories" [value]="category.id">{{ category.name }}</option>
    </select>
  </div>
  <div class="checkbox">
  <label>
    <input
    ngModel 
    name="isGuarantee"
    type="checkbox">
    30-day money-back guarantee
  </label>
  </div>
  <p>
  {{ f.value | json }}
  </p>
  <button
  [disabled]="!f.valid"
  class="btn btn-primary">Created</button>
</form>